import React,{useState,useEffect,useRef} from "react";
import LlxTable from 'components/LlxTable'
import LlxForm from 'components/LlxForm/index'
import { Form,Button,Select,Cascader,Tag,Modal,DatePicker,Alert} from 'antd';

import { Tooltip,Image} from 'antd';

import {getVideoListShelf} from 'api/index'
import classNames from "classnames";
const { RangePicker } = DatePicker;


const { SHOW_CHILD } = Cascader;


function AddVideoFullDialog(props) {
  const {isModalVisible, setIsModalVisible,userName,dictionaries,title,multipleType,returnSelect} = props

  const [form] = Form.useForm();//新增学习视频
  
  const [loading,setLoading] = useState(false)

  useEffect(()=>{
    isModalVisible&&getNewList()
  },[isModalVisible])// eslint-disable-line react-hooks/exhaustive-deps

  let columns = [
    {title: '名称',fixed:'left', dataIndex: 'videoName',width:250, key: 'videoName', align: 'center',render: (text, record) => {
      return <div className="operate_link_group text-nowrap text-color-green">
        {text}
     </div>
   }},
    {title: '封面', dataIndex: 'pictureUrl',width:150, key: 'pictureUrl', align: 'center',render:(text)=>{
      return <div>
      {
        text?<Image
        width={60}
        src={text}
      />:''
      }
    </div>
    }},
    {title: '适合年纪', dataIndex: 'ageName',width:100, key: 'ageName', align: 'center'},
    {title: '发行方', dataIndex: 'publisher',width:150, key: 'publisher', align: 'center'},
    {title: '主题', dataIndex: 'themes',width:200, key: 'themes', align: 'center', render: (text, record) => {
      return <div className="operate_link_group text-nowrap">
       {record.themes?.map((i,j)=>{
         return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.themeName).join(' ')}>
          {
            j<3?<Tag key={i.id} color="lime">{i.themeName}</Tag>:''
          }
           </Tooltip>
       })}
     </div>}
    },
    {title: '系列', dataIndex: 'serialName',width:150, key: 'serialName', align: 'center'},
    {title: '类型', dataIndex: 'videoCategoryName',width:150, key: 'videoCategoryName', align: 'center'},
    {title: '标签', dataIndex: 'labels', key: 'labels',width:200, align: 'center', render: (text, record) => {
     return <div className="operate_link_group text-nowrap">
      {record.labels?.map((i,j)=>{
        return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.labelName).join(' ')}>
         {
           j<3?<Tag key={i.id} color="green">{i.labelName}</Tag>:''
         }
          </Tooltip>
      })}
    </div>
   }},
    {title: '创建人',width:120, dataIndex: 'createBy', key: 'createBy', align: 'center',render: (text, record) => {
      return <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
        {text}
     </div>
   }},
    {title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', align: 'center',width:150},
    {title: '操作',fixed:'right', dataIndex: 'operate', key: 'operate', align: 'center',width:100,render:(text, record)=>{
      return  <div className="text-link" onClick={()=>selectVideo(record.id)}>
       选择此视频
     </div>
    }}
  ]
   
  // 判断单选还是多选去掉操作一栏
  if(multipleType){
    columns = columns.filter(i=>i.title!=='操作')
  }

  //分页数据
  const [pagination,setPagination] = useState({
    current:1,
    pageSize:20
  })

  //初始表格数据
  const [dataSource,setDataSource] = useState([])
  
  // 新增表单
  const newItem = [
  {label: '视频名称',type:'input', name: 'videoName' , span: 4 },
  {label: '适合年纪', name: 'ageId' , span: 4 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择适合年纪'}
    options={dictionaries.AgeRange}
  >
  </Select>
  } },
  {label: '视频类型', name: 'videoCategoryId', span: 4 ,render:()=>{
    return  <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择类型'}
    options={dictionaries.AVType}
  >
  </Select>
  }},
  {label: '配音', name: 'dub', span: 4 ,render:()=>{
    return <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    maxTagCount={1}
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择配音'}
    options={dictionaries.isDub}
  >
  </Select>
  }},
  {label: '字幕内嵌', name: 'captionInId', span: 4 ,render:()=>{
    return <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    maxTagCount={1}
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择幕内嵌'}
    options={dictionaries.CaptionIn}
  >
  </Select>
  }},
  {label: '视频系列', name: 'avSerialId', span: 4 ,render:()=>{
    return   <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择系列'}
    options={dictionaries.AvSerial}
  >
  </Select>
  }},
  {label: '主题', name: 'theme', span: 4 ,render:()=>{
    return   <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    mode="multiple"
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择主题'}
    options={dictionaries.Theme}
  >
  </Select>
  }},
  {label: '标签', name: 'label', span: 4 ,render:()=>{
    return  <Cascader  maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} fieldNames={{value:'id',label:'labelName'}} options={dictionaries.Label} multiple placeholder="请选择标签" />
  }},
  {label: '发行方',type:'input', name: 'publisher', span: 4 },
  {label: '创建人', name: 'createBy',  span: 4 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="userName"
    showSearch
    fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择创建人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
  }},
  {label: '更新人', name: 'updateBy',  span: 4 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="userName"
    showSearch
    fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择创建人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
  }},
    {label: '更新时间', name: 'updateTime', span: 4 ,render: () => {
      return  <RangePicker showTime onChange={getUpdateTime} style={{width:'100%'}}/>
  }}
    ]

  //选择数据
  const [selectedRowKeys,setselectedRowKeys] = useState([])
  const rowSelection  = useRef({
    selectedRowKeys: selectedRowKeys,
    onChange: value => {
    setselectedRowKeys(value)
    rowSelection.current.selectedRowKeys = value
    }
  })
 
  // 用户点击选择将数据返回
  const selectVideo = (value) => {
    if(multipleType){
      // 多选
      returnSelect(dataSource.filter(i=>selectedRowKeys.includes(i.id)))
    } else {
      // 单选
      returnSelect(value)
    }
  }
  
  // 获取数据
  const getNewList = async(value) => {
    setLoading(true)
    const params = form.getFieldValue()
    params.currPage=value&&value.pageSize?value.current:pagination.current
    params.pageSize=value&&value.pageSize?value.pageSize:pagination.pageSize
    params.labels = params.label?params.label.map(i=>{
      return {id:i[1]}
    }):[]
    params.themes = params.theme?params.theme.map(i=>{
      return {id:i}
    }):[]
    params.upperLower = 1010

    const res = await getVideoListShelf(params)
    setDataSource(res.result.records)

    setLoading(false)
  }
  
  // 关闭
  const onCancel = () => {
    setIsModalVisible(false)
  }

    // 获取时间
  const getUpdateTime = (value,dataString) => {
  const data = form.getFieldValue()
  data.startTime=dataString[0]
  data.endTime=dataString[1]
  form.setFieldsValue(data)
  }
  
  
  return   <Modal  wrapClassName="modal-full"   visible={isModalVisible} footer={null} onCancel={onCancel}>
        
        <div className="full-modal-title">
          <Alert message={title} type="success" />
        </div>
       
       {/* 搜索表单加表格 */}
       <LlxForm form={form} labelCol={7} formItem={newItem} />

       <div style={{marginBottom:'10px'}}>
         <Button type={'primary'} onClick={getNewList}>查询</Button>
        {
           multipleType?<Button style={{marginLeft:'20px'}} type={'primary'} onClick={selectVideo}>添加选中的视频</Button>:''
        }
       </div>

       {
         multipleType?<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         rowSelection={rowSelection.current}
         height={350}
         getNewList={getNewList}
         columns={columns}
         dataSource={dataSource}/>:<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         height={350}
         getNewList={getNewList}
         columns={columns}
         dataSource={dataSource}/>
       }
   </Modal>
}

export default AddVideoFullDialog